<!doctype html>
<html lang="zh-CN">
  <!-- <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
</head> -->
  <script language="javascript">
    function CallApp(name, params, callback) {
      if (params == null) {
        params = {};
      }
      let data = {
        name: name,
        params: params,
        callback: null,
      };
      if (callback != null) {
        var callback_name = 'C' + Math.random().toString(36).substr(2);
        window[callback_name] = function (obj) {
          callback(obj);
          delete window[callback_name];
        };
        data.callback = callback_name;
      }
      //Android.call(JSON.stringify(data));
      //alert(JSON.stringify(data))
      window.webkit.messageHandlers.call.postMessage(JSON.stringify(data));
    }

    function OpenCamera() {
      CallApp('CameraOpen', {}, function (data) {
        document.getElementById('myImg').setAttribute('src', 'data:image/png;base64,' + data);
      });
    }

    function OpenAlbum() {
      CallApp('AlbumOpen', {}, function (data) {
        document.getElementById('myImg').setAttribute('src', 'data:image/png;base64,' + data);
      });
    }

    function ShowToast() {
      var toastText = document.getElementById('toast').value;
      CallApp('ToastShow', toastText, function (data) {
        console.log(data);
      });
    }

    function SaveData() {
      var name = document.getElementById('dataSaveKey').value;
      var value = document.getElementById('dataSave').value;
      CallApp(
        'DataSave',
        {
          name: name,
          value: value,
        },
        function (data) {
          console.log(data);
        },
      );
    }

    function GetData() {
      var name = document.getElementById('dataGet').value;
      CallApp(
        'DataGet',
        {
          name: name,
        },
        function (data) {
          console.log(data);
        },
      );
    }

    function CallPhone() {
      var name = document.getElementById('phoneCall').value;
      CallApp(
        'CallPhone',
        {
          name: name,
        },
        function (data) {
          console.log(data);
        },
      );
    }
  </script>

  <body>
    <div style="font-size: 30px">
      <a href="javascript:alert('abc')">alert</a><br />
      <a href="javascript:confirm('abc')">confirm</a><br />
      <a href="missing.html">Open Inside</a><br />
      <a href="javascript:CallApp('WebViewOpen', {'name':'webview1', 'url':'index2'})"
        >Open New WebView</a
      ><br />
      <a href="javascript:OpenCamera()">Open Camera</a><br />
      <a href="javascript:OpenAlbum()">Open Photo Album</a><br />
      <input id="toast" size="30" /> <a href="javascript:ShowToast()">Toast Show</a><br />
      <input id="dataSaveKey" size="30" /><input id="dataSave" size="30" />
      <a href="javascript:SaveData()">Data Save</a><br />
      <input id="dataGet" size="30" /> <a href="javascript:GetData()">Data Get</a><br />
      <input id="phoneCall" size="30" /> <a href="javascript:CallPhone()">Phone Call</a><br />
    </div>
    <br />
    <div>
      <img
        id="myImg"
        style="display: block; width: 220px; height: 220px"
        src="https://avatars0.githubusercontent.com/u/12035068?s=460&v=4"
      />
    </div>
  </body>
</html>
